<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ref, onMounted } from 'vue'

const isLoading = ref(true)

onMounted(() => {
  // 模拟页面加载
  setTimeout(() => {
    isLoading.value = false
  }, 500)
})
</script>

<template>
  <div class="app-container">
    <Transition name="fade">
      <div v-if="isLoading" class="loading-screen">
        <t-loading size="large" />
      </div>
    </Transition>

    <Transition name="fade" mode="out-in">
      <RouterView v-if="!isLoading" />
    </Transition>

    <!-- 返回顶部按钮 -->
    <t-back-top :visibleHeight="300" />
  </div>
</template>

<style lang="less">
body {
  margin: 0;
  padding: 0;
  font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif;
}

.app-container {
  position: relative;
  min-height: 100vh;
}

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

// 全局过渡动画
.page-enter-active,
.page-leave-active {
  transition: opacity 0.3s ease;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}

// 全局滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

// 全局链接过渡
a {
  transition: all 0.3s ease;
}

// 全局按钮过渡
button {
  transition: all 0.3s ease;
}

// 全局卡片悬浮效果
.t-card {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }
}
</style>